<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(item, index) in lunboData"
        :key="index"
        class="lunboImgBox"
      >
        <img :src="item.img" alt="" class="lunboImg" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :border="false" :column-num="4">
      <van-grid-item
        v-for="(item, index) in grid"
        :key="index"
        :to="item.router"
      >
        <img :src="item.img" alt="" style="width: 40%" />
        <span class="gridFont">{{ item.text }}</span>
      </van-grid-item>
    </van-grid>

    <div class="recommend">
      <span class="recommendFont">为您推荐</span>
      <hr />

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="recommendValueBox">
          <!-- Recommend是推荐数据的组件
          这里把循环后的recommendData,也就是把recommendData里的对象拿了出来,通过:data="item"传给了子组件

          为什么要在这请求接口,把数据返回给组件,而不是在组件里请求接口?
          理由: 因为有些地方用Recommend组件时需要修改一些东西,需要用到插槽, 这时就不能在子组件那里请求接口,在子组件那里写for循环,
                因为在这里传过去的东西获取不到子组件里v-for循环的数据,也就是在Recommend里写{{item.name}}会报错 

            代码优化: 在这里请求接口,在调用子组件时在子组件标签里写for循环,通过插槽把东西传过去, 
           -->

          <Recommend
            v-for="item in recommendData"
            :key="item.id"
            :data="item"
          ></Recommend>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { lunbo } from "@/api/homeApi.js";
import { recommend } from "@/api/homeApi.js";
import Recommend from "@/components/recommend.vue";

export default {
  data() {
    return {
      lunboData: "",
      grid: [
        {
          img: require("@/assets/menu1.png"),
          text: "数码电器",
          router: "/shuma",
        },
        {
          img: require("@/assets/menu2.png"),
          text: "9.9元拼单",
          router: "/pindan",
        },
        {
          img: require("@/assets/menu3.png"),
          text: "淘超市",
          router: "/chaoshi",
        },
        {
          img: require("@/assets/menu4.png"),
          text: "话费充值",
          router: "/huafei",
        },
        {
          img: require("@/assets/menu5.png"),
          text: "物流查询",
          router: "/wuliu",
        },
        { img: require("@/assets/menu6.png"), text: "分类", router: "/genduo" },
        { img: require("@/assets/menu7.png"), text: "淘图", router: "/taotu" },
        { img: require("@/assets/menu8.png"), text: "淘文", router: "/taowen" },
      ],
      recommendData: [],

      pagesize: 10,
      pageindex: 1,
      loading: false,
      finished: false,
    };
  },
  methods: {
    async lunboAxios() {
      let { data } = await lunbo();
      this.lunboData = data.message;
    },
    async recommendAxios(size, index) {
      let { data } = await recommend(size, index);
      this.recommendData.push(...data.message);


      // 判断是否还有数据,如果没有就把finished设为true,也就是让页面的底部显示"没有更多了"
      if (data.message.length < 10) {
        this.finished = true;
      }
    },
    // onLoad上拉加载时触发的函数
    onLoad() {
      setTimeout(() => {
        if (this.loading == true) {
          this.pageindex++;
          this.recommendAxios(this.pagesize, this.pageindex);
        }

        this.loading = false;
      }, 600);
    },
  },

  created() {
    this.lunboAxios();
    this.recommendAxios(this.pagesize, this.pageindex);
  },
  components: {
    Recommend,
  },
};
</script>

<style lang="scss" scoped>
$ui-width: 720;
$num: 15;
$baseFontSize: 50; // 750 / 15
@function px2rem($px) {
  @return $px / $baseFontSize + rem;
}

// 轮播图样式
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0px;
  // line-height: 150px;
  // text-align: center;
  background-color: #39a9ed;
  max-width: 750px;
  min-width: 320px;
  height: px2rem(280);
}

.lunboImgBox {
  max-width: 750px;
  min-width: 320px;
}

.lunboImg {
  width: 100%;
  height: 100%;
}

.gridFont {
  font-size: px2rem(16);
  color: #ccc;
}
.recommend {
  padding: 15px 10px;
  background-color: #f0f0f0;
  position: relative;

  .recommendFont {
    width: 100px;
    background-color: #f0f0f0;
    text-align: center;
    z-index: 1;
    position: relative;
    display: block;
    font-size: px2rem(16);
    margin: auto;
  }

  hr {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
  }

  .recommendValueBox {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
</style>
